<template>
    <div class=" background-fff">
        <div class="data-box clearfix">
            <span class="data-tit color-3 font-28">
                个人信息
            </span>
            <ul class="data-ul clearfix">
                <li class="font-24 color-3">
                    星座：{{userobj.zodiacSigns}}
                </li>
                <li class="font-24 color-3" v-if="userobj.birthday!=null">
                    生日：{{$str(userobj.birthday,5,2)}}月{{$str(userobj.birthday,8,2)}}日
                </li>
                <li class="font-24 color-3" v-else>
                    生日：
                </li>
                <li class="font-24 color-3" v-if="isMe==true">
                    Q&nbsp;Q：{{userobj.qq}}
                </li>
            </ul>
        </div>
        <div class="data-box clearfix padding-span">
            <span class="data-tit color-3 font-28">
                兴趣爱好
            </span>
            <span class="data-ul clearfix ">
                <em class="color-3 font-24 juli" v-for="(val,index) in hobbyArr" :key="index">{{val}}</em>               
            </span>
        </div>
    </div>
</template>
<script>
import apiHttp from "../../api/index"
import { Tabbar, Toast } from 'vant';
export default {
    props:["userobj","isMe"],
    data(){
        return{        
          hobbyArr:[]         
        }
    },
    mounted(){ 
        if(this.userobj.hobby!=null||this.userobj.hobby!=''){
            this.hobbyArr = this.userobj.hobby.split(','); 
        } 
    },
    methods:{
        tiaoUrl(){            
            this.$router.push("editorData");           
        }
        
    }
}
</script>
<style scoped>
.data-box{
    padding-top: .2rem;
}
.padding-span{
    padding-bottom: 2rem;
}
.data-tit{
    height: .6rem;
    line-height: .6rem;
    border-left: .1rem solid #E55F5E;
    padding-left: .2rem;
    display: block;
    margin: .4rem 0;
}
.data-ul{
    border-top: #eeeeee solid .04rem;
    padding: .4rem 0;
    display: block;
}
.data-ul li{
    height: .8rem;
    line-height: .8rem;
}
.data-ul em{
    height: .76rem;
    background-color: #EEEEEE;
    line-height: .76rem;
    padding: .2rem .6rem;
    border-radius: .6rem;
}
.juli{
    display: inline-block;
    margin: .2rem;
}
</style>

